<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>购物车系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 600px;
      margin: 0 auto;
    }
    .product-list, .cart {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 20px; /* 上下间距 */
    }
    .product-item, .cart-item {
      margin: 15px 0;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    button {
      cursor: pointer;
      padding: 5px 10px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
    }
    .cart-summary {
      margin-top: 20px;
      font-weight: bold;
      text-align: right; /* 摘要右对齐 */
    }
    .quantity-btn {
      background: #6c757d;
      margin: 0 5px;
    }
    .delete-btn {
      background: #dc3545;
    }
    h2 {
      color: #333;
      margin-top: 0;
    }
  </style>
</head>
<body>
<!-- 商品列表（上方） -->
<div class="product-list">
  <h2>商品列表</h2>
  <div id="products"></div>
</div>

<!-- 购物车（下方） -->
<div class="cart">
  <h2>购物车</h2>
  <div id="cart-items"></div>
  <div class="cart-summary">
    <p>商品总数: <span id="total-quantity">0</span></p>
    <p>总价: ¥<span id="total-price">0</span></p>
  </div>
</div>

<script>
  // 商品数据
  const products = [
    { id: 1, name: "商品 1", price: 100 },
    { id: 2, name: "商品 2", price: 200 },
    { id: 3, name: "商品 3", price: 150 }
  ];

  // 购物车数据
  let cart = [];

  // 初始化商品列表
  function renderProducts() {
    const container = document.getElementById('products');
    container.innerHTML = products.map(product => `
                <div class="product-item">
                    <h3>${product.name}</h3>
                    <p>价格: ¥${product.price}</p>
                    <button onclick="addToCart(${product.id})">添加到购物车</button>
                </div>
            `).join('');
  }

  // 添加商品到购物车
  function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    const existing = cart.find(item => item.id === productId);

    if (existing) {
      existing.quantity++;
    } else {
      cart.push({ ...product, quantity: 1 });
    }
    renderCart();
  }

  // 渲染购物车
  function renderCart() {
    const container = document.getElementById('cart-items');
    container.innerHTML = cart.map(item => `
                <div class="cart-item">
                    <h3>${item.name}</h3>
                    <p>价格: ¥${item.price}</p>
                    <div>
                        <button class="quantity-btn" onclick="updateQuantity(${item.id}, -1)">-</button>
                        <span>${item.quantity}</span>
                        <button class="quantity-btn" onclick="updateQuantity(${item.id}, 1)">+</button>
                        <button class="delete-btn" onclick="confirmDelete(${item.id})">删除</button>
                    </div>
                    <p>总价: ¥${item.price * item.quantity}</p>
                </div>
            `).join('');

    // 更新摘要
    const totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
    const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    document.getElementById('total-quantity').textContent = totalQuantity;
    document.getElementById('total-price').textContent = totalPrice;
  }

  // 修改商品数量
  function updateQuantity(productId, delta) {
    const item = cart.find(item => item.id === productId);
    if (item) {
      item.quantity += delta;
      if (item.quantity <= 0) {
        cart = cart.filter(item => item.id !== productId);
      }
      renderCart();
    }
  }

  // 删除确认
  function confirmDelete(productId) {
    if (confirm("是否确认删除？")) {
      cart = cart.filter(item => item.id !== productId);
      renderCart();
    }
  }

  // 初始化
  renderProducts();
  renderCart();
</script>
</body>
</html>